<!DOCTYPE html>
<html>
  <head>
    <style>
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }
      /* Track */
      ::-webkit-scrollbar-track {
        background: rgb(255, 255, 255);
        border-radius: 3px;
      }
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: rgb(201, 201, 202);
        border-radius: 3px;
      }
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: rgb(162, 162, 163);
      } 
      .el-menu::-webkit-scrollbar,
      .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
      }
      .el-menu:hover::-webkit-scrollbar,
      .el-table__body-wrapper:hover::-webkit-scrollbar {
        display: block;
      }
    </style>
    <link href="static/out/main.css" rel="stylesheet" type="text/css" /> 
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <script src='./vue.js'></script>
    <script src='./utils/storage.js'></script>
    <script src='./utils/api/sina.js'></script>
    <meta charset="UTF-8">
    <title>Stock Cat</title>
  </head>
  <body>
    <div class='main-container' id='app'>
      <div class='header'>
        <div class='header-tab-item' :class='{"header-tab-item-active" : headerMenuBar === "RULE"}' name='rule' @click='headerMenu("RULE")'>
           <div class='icon'>
            <!-- icon_booked.svg -->
             <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M963.764706 1024H602.352941a60.235294 60.235294 0 0 1-60.235294-60.235294V602.352941a60.235294 60.235294 0 0 1 60.235294-60.235294h361.411765a60.235294 60.235294 0 0 1 60.235294 60.235294v361.411765a60.235294 60.235294 0 0 1-60.235294 60.235294z m0-542.117647H602.352941a60.235294 60.235294 0 0 1-60.235294-60.235294V60.235294a60.235294 60.235294 0 0 1 60.235294-60.235294h361.411765a60.235294 60.235294 0 0 1 60.235294 60.235294v361.411765a60.235294 60.235294 0 0 1-60.235294 60.235294zM421.647059 1024H60.235294a60.235294 60.235294 0 0 1-60.235294-60.235294V602.352941a60.235294 60.235294 0 0 1 60.235294-60.235294h361.411765a60.235294 60.235294 0 0 1 60.235294 60.235294v361.411765a60.235294 60.235294 0 0 1-60.235294 60.235294z m0-542.117647H60.235294a60.235294 60.235294 0 0 1-60.235294-60.235294V60.235294a60.235294 60.235294 0 0 1 60.235294-60.235294h361.411765a60.235294 60.235294 0 0 1 60.235294 60.235294v361.411765a60.235294 60.235294 0 0 1-60.235294 60.235294z"  /></svg>
           </div>
           <div class='title'>
              <span text>规则</span>
           </div>
        </div>
        <div class='header-tab-item' :class='{"header-tab-item-active" : headerMenuBar === "CONFIG"}' name='config' @click='headerMenu("CONFIG")'>
          <div class='icon'>
            <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M1.183187 509.985385a561.406033 561.406033 0 0 1 10.360876-107.574043 191.356442 191.356442 0 0 0 146.45931-99.451627 209.328087 209.328087 0 0 0 7.418899-186.112048A505.252639 505.252639 0 0 1 356.714759 0a186.943476 186.943476 0 0 0 315.111361 1.598901A506.148023 506.148023 0 0 1 862.479046 120.876897a209.455999 209.455999 0 0 0 9.145712 182.146774 191.22853 191.22853 0 0 0 140.703266 98.684155 563.260758 563.260758 0 0 1-3.965273 234.974455 191.868091 191.868091 0 0 0-136.737993 98.10855 209.200175 209.200175 0 0 0-14.070327 169.355568 505.892199 505.892199 0 0 1-196.2171 117.870964 186.303916 186.303916 0 0 0-294.197739 1.343077 504.613079 504.613079 0 0 1-196.472925-115.120855 209.455999 209.455999 0 0 0-12.791206-173.320842A191.420398 191.420398 0 0 0 15.317469 635.914809a560.446693 560.446693 0 0 1-14.134282-125.929424zM512 730.889513A219.305228 219.305228 0 1 0 293.078509 511.648242 219.11336 219.11336 0 0 0 512 730.889513z"  /></svg>
          </div>
          <div class='title'>
            <span text>设置</span>
         </div>
        </div>
        <div class='header-tab-item' :class='{"header-tab-item-active" : headerMenuBar === "SUPPORT"}' name='support' @click='headerMenu("SUPPORT")'>
          <div class='icon'>
            <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M768 438.857143a217.307429 217.307429 0 0 1-140.8-52.443429l-241.371429 160.914286a180.955429 180.955429 0 0 1 15.652572 69.046857l347.209143 148.772572A144.749714 144.749714 0 0 1 841.142857 731.428571a146.285714 146.285714 0 1 1-146.285714 146.285715 147.748571 147.748571 0 0 1 2.340571-23.625143l-340.041143-113.371429a182.857143 182.857143 0 1 1-44.836571-275.748571l240.932571-200.704A215.844571 215.844571 0 0 1 548.571429 219.428571a219.428571 219.428571 0 1 1 219.428571 219.428572z"  /></svg>
          </div>
          <div class='title'>
            <span text>支持</span>
         </div>
        </div>
        <div class='header-tab-item' :class='{"header-tab-item-active" : headerMenuBar === "US"}' name='us' @click='headerMenu("US")'>
          <div class='icon'>
            <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M768 438.857143a217.307429 217.307429 0 0 1-140.8-52.443429l-241.371429 160.914286a180.955429 180.955429 0 0 1 15.652572 69.046857l347.209143 148.772572A144.749714 144.749714 0 0 1 841.142857 731.428571a146.285714 146.285714 0 1 1-146.285714 146.285715 147.748571 147.748571 0 0 1 2.340571-23.625143l-340.041143-113.371429a182.857143 182.857143 0 1 1-44.836571-275.748571l240.932571-200.704A215.844571 215.844571 0 0 1 548.571429 219.428571a219.428571 219.428571 0 1 1 219.428571 219.428572z"  /></svg>          </div>
          <div class='title'>
            <span text>关于我</span>
         </div>
        </div>
      </div>
      <div class='main'>
        <!-- favorite -->
        <div class='content content-rule' v-if='headerMenuBar === "RULE"'>
          <div class='rule-list'>
            <div class='data-list' id='ruleList'>
              <span class='text-empty' v-if='!rules || rules.length == 0'>无规则，请在新建规则保存！</span>
              <div class='data-list-item' :class='{"data-list-item-active": selectedRulesId === item.id}' v-for='(item,index) in rules' @click='onSelectRules(item)'>
                  <div class='rule-name' v-show="intervalTimer">
                    <span>{{item.ruleName}}</span>
                    <span v-if='item.isUp'>
                      📈{{item.currentPrice}}
                    </span>
                    <span v-if='!item.isUp'>
                      📉{{item.currentPrice}}
                    </span>
                  </div>
                  <span>{{item.sharesName}}({{item.sharesCode}})</span>
              </div>
            </div>
            <div class='operation-area' v-if='selectedRulesId'>
              <div class='icon-btn' @click='onOperationAdd'>
                <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M533.333333 490.666667h281.6c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333333h-281.6v281.6c0 12.8-8.533333 21.333333-21.333333 21.333334s-21.333333-8.533333-21.333333-21.333334v-281.6H209.066667c-12.8 0-21.333333-8.533333-21.333334-21.333333s8.533333-21.333333 21.333334-21.333333h281.6V209.066667c0-12.8 8.533333-21.333333 21.333333-21.333334s21.333333 8.533333 21.333333 21.333334v281.6z" /></svg>
              </div>
              <div class='icon-btn' @click='onOperationEdit'>
                <svg t="1594954546558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1324" width="16" height="16"><path d="M465.066667 648.533333l-72.533334 72.533334-12.8 12.8c-4.266667 4.266667-8.533333 4.266667-8.533333 4.266666-4.266667 0-8.533333 0-17.066667 4.266667l-89.6 8.533333c-25.6 4.266667-42.666667-17.066667-46.933333-38.4v-8.533333l8.533333-89.6c0-8.533333 0-12.8 4.266667-17.066667 0-4.266667 4.266667-8.533333 4.266667-8.533333l12.8-12.8 247.466666-247.466667c12.8-12.8 21.333333-17.066667 25.6-21.333333 8.533333-4.266667 17.066667-4.266667 21.333334 0 8.533333 4.266667 12.8 4.266667 25.6 21.333333L640 401.066667c12.8 12.8 17.066667 21.333333 21.333333 25.6 4.266667 8.533333 4.266667 17.066667 0 21.333333-4.266667 8.533333-4.266667 12.8-21.333333 25.6l-85.333333 85.333333c-8.533333 8.533333-21.333333 8.533333-29.866667 0-8.533333-8.533333-8.533333-21.333333 0-29.866666l81.066667-81.066667 8.533333-8.533333-8.533333-8.533334-72.533334-72.533333-8.533333-8.533333-8.533333 8.533333-247.466667 247.466667-4.266667 4.266666v8.533334L256 708.266667l89.6-8.533334h8.533333s4.266667 0 4.266667-4.266666l72.533333-72.533334c8.533333-8.533333 21.333333-8.533333 29.866667 0 12.8 4.266667 12.8 17.066667 4.266667 25.6zM738.133333 196.266667l29.866667 29.866666c34.133333 34.133333 34.133333 85.333333 0 119.466667l-29.866667 29.866667c-17.066667 17.066667-42.666667 17.066667-59.733333 0l-89.6-89.6c-17.066667-17.066667-17.066667-42.666667 0-59.733334l29.866667-29.866666c29.866667-34.133333 85.333333-34.133333 119.466666 0z m-29.866666 29.866666c-17.066667-17.066667-42.666667-17.066667-59.733334 0l-34.133333 29.866667 89.6 89.6 29.866667-29.866667c17.066667-17.066667 17.066667-42.666667 0-59.733333l-25.6-29.866667zM789.333333 853.333333h-554.666666c-12.8 0-21.333333-8.533333-21.333334-21.333333s8.533333-21.333333 21.333334-21.333333h554.666666c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333333z" p-id="1325"></path></svg>
              </div>
              <div class='icon-btn' @click='onOperationRemove'>
                <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M704 708.266667c8.533333-8.533333 21.333333-8.533333 29.866667 0 8.533333 8.533333 8.533333 21.333333 0 29.866666-59.733333 59.733333-140.8 89.6-221.866667 89.6-174.933333 0-320-145.066667-320-320S337.066667 192 512 192s320 145.066667 320 320c0 29.866667-4.266667 64-12.8 89.6-4.266667 12.8-17.066667 17.066667-25.6 12.8-12.8-4.266667-17.066667-17.066667-12.8-25.6 8.533333-25.6 12.8-51.2 12.8-81.066667 0-153.6-123.733333-277.333333-277.333333-277.333333s-281.6 128-281.6 281.6 123.733333 277.333333 277.333333 277.333333c72.533333 0 140.8-29.866667 192-81.066666zM482.133333 512L392.533333 422.4c-8.533333-8.533333-8.533333-21.333333 0-29.866667s21.333333-8.533333 29.866667 0l89.6 89.6 89.6-89.6c8.533333-8.533333 21.333333-8.533333 29.866667 0s8.533333 21.333333 0 29.866667L541.866667 512l89.6 89.6c8.533333 8.533333 8.533333 21.333333 0 29.866667s-21.333333 8.533333-29.866667 0L512 541.866667l-89.6 89.6c-8.533333 8.533333-21.333333 8.533333-29.866667 0s-8.533333-21.333333 0-29.866667l89.6-89.6z" /></svg>
              </div>
              <div class='icon-btn' @click='onOperationRefresh'>
                <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="24px" height="24.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M780.8 614.4c-42.666667 106.666667-145.066667 179.2-260.266667 179.2-119.466667 0-221.866667-76.8-260.266666-183.466667-4.266667-12.8 0-21.333333 12.8-25.6 12.8-4.266667 21.333333 0 25.6 12.8 34.133333 93.866667 119.466667 157.866667 221.866666 157.866667 98.133333 0 187.733333-64 221.866667-153.6l-34.133333 21.333333c-8.533333 4.266667-21.333333 4.266667-29.866667-8.533333-4.266667-8.533333-4.266667-21.333333 8.533333-29.866667l72.533334-42.666666c8.533333-4.266667 21.333333-4.266667 29.866666 8.533333l42.666667 72.533333c4.266667 8.533333 4.266667 21.333333-8.533333 29.866667s-21.333333 4.266667-29.866667-8.533333l-12.8-29.866667zM247.466667 460.8c25.6-128 140.8-221.866667 273.066666-221.866667 136.533333 0 251.733333 98.133333 273.066667 230.4 0 12.8-4.266667 21.333333-17.066667 25.6-12.8 0-21.333333-4.266667-25.6-17.066666-17.066667-110.933333-115.2-196.266667-230.4-196.266667-110.933333 0-204.8 76.8-230.4 183.466667l25.6-12.8c8.533333-4.266667 21.333333-4.266667 29.866667 8.533333s4.266667 21.333333-8.533333 29.866667l-72.533334 42.666666c-8.533333 4.266667-21.333333 4.266667-29.866666-8.533333l-42.666667-72.533333c-4.266667-8.533333-4.266667-21.333333 8.533333-29.866667s21.333333-8.533333 29.866667 4.266667l17.066667 34.133333z" /></svg>
              </div>
            </div>
          </div>
          <div class='rule-form'>
            <div class='detail-area' v-if='rules != null && rules.length > 0 && !showForm'>
              <img :src="getGif()"/>
            </div>
            <div class='form-area' v-if='showForm || rules.length == 0'>
              <div class='card'>
                <h4>基本信息</h4>
                <div class='form-area-item'>
                  <div class='cel'>
                    <span>规则名称：</span>
                  </div>
                  <div class='cel' name='name'>
                    <input  class='lg-input'  v-model='form.ruleName'/>
                  </div>
                </div>

                <div class='form-area-item'>
                  <div class='cel'>
                    <span>监控资源：</span>
                  </div>
                  <div class='cel' name='name'>
                    <input class='lg-input' v-model='sharesSearchKey' @blur='onSearchInputblur' @focus='onSearchInputFocus'/>
                    <input v-model='form.sharesName' type='hidden' />
                    <input v-model='form.sharesCode' type='hidden' />
                    <div class='search-select' v-show='searchSelectVisiable'>
                      <span 
                      class='search-select-option'
                      v-for="(item, index) in searchSelectOptions"
                      @click='onSearchSelected(item.sharesName, item.sharesCode)'
                      :id='item.sharesCode'>{{item.sharesName}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class='card'>
                <h4>
                  监控规则
                </h4>
                <div class='form-area-item'>
                  <div class='cel'>
                    <select v-model='form.ruleType' class='lg-select'>
                      <option value='RDF'>日跌幅>=</option>
                      <option value='RZF'>日涨幅>=</option>
                      <option value='JGZ'>价格>=</option>
                      <option value='JGD'>价格<=</option>
                    </select>
                  </div>
                  <div class='cel' v-if='form.ruleType'>
                    <input class='sl-input' v-model='form.ruleValue' />
                    <span v-if='form.ruleType === "RDF" || form.ruleType === "RZF"'>%</span>
                    <span v-if='form.ruleType === "JGZ" || form.ruleType === "JGD"'>元</span>
                  </div>
                </div>
                <div class='form-area-item'>
                  <div class='cel' name='name'>
                    <input name='ruleBaseInfo_' v-model='form.repeatNot' value='repeatNot' type ='checkbox'/>
                  </div>
                  <div class='cel'>
                    <span>重复通知</span>
                  </div>
                </div>
              </div>
              <div class='btn-area'>
                <button @click='saveRule'>保存</button>
                <button @click='cancel'>取消</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 设置 -->
        <div class='content content-config' id='config' v-if='headerMenuBar === "CONFIG"'>
          <div class='form-area form-area-config'>
            <h4>基本配置</h4>
            <div class='form-area-item'>
              <div class='cel'>
                <span>轮训监控：</span>
              </div>
              <div class='cel'>
                 <input v-model='configForm.status' type='radio' value='on' name='configStatus'/><span>开启</span>
                 <input v-model='configForm.status' type='radio' value='off'  name='configStatus'/><span>关闭</span>
              </div>
            </div>
            <div class='form-area-item'>
              <div class='cel'>
                <span>数据更新轮训周期：</span>
              </div>
              <div class='cel'>
                <select v-model='configForm.intervalMs'>
                  <option value='10000'>10秒</option>
                  <option value='60000'>1分钟</option>
                  <option value='180000'>3分钟</option>
                  <option value='600000'>10分钟</option>
                  <option value='1800000'>30分钟</option>
                </select>
              </div>
            </div>
            <div class='form-area-item'>
              <span>
                🚫🚫频率过高，可能导致IP被封，故请理性选择查询频率.
              </span>
            </div>
            <div class='form-area-item'>
              <div class='cel'>
                <input type='checkbox' v-model='configForm.hideNotifactionDetail'/>
              </div>
              <div class='cel'>
                <span>隐藏通知详情</span>
              </div>
            </div>
            <div class='form-area-item'>
             <span>👀👀隐藏告警规则通知详情后，将只会提示您有1条新消息</span>
            </div>
            <div class='form-area-item'>
              <div class='cel'>
                <span>自定义通知模版：</span>
              </div>
              <div class='cel'>
                <textarea v-model='configForm.notificationTemplate' cols='10' rows='5' class='lg-input' style='width: 200px;'></textarea>
              </div>
            </div>
            <div class='form-area-item'>
              <span>🔥🔥隐藏告警规则通知详情后，将只会提示您“有1条新消息”</span>
             </div>
          </div>
        </div>
        <!-- 支持 -->
        <div class='content content-support' id='support' v-if='headerMenuBar === "SUPPORT"'>
          支持
        </div>
        <!-- 关于我们 -->
        <div class='content content-us' id='us' v-if='headerMenuBar === "US"'>
          关于我
        </div>
      </div>
    </div>
  </body>
  <script src='./static/components.js'></script>
</html>
